<template>
  <el-card class="article-detail-main" shadow="never">
    <article class="article-detail-content">
      <mavonEditor
        :value="article.main.content"
        codeStyle="agate"
        defaultOpen="preview"
        :toolbarsFlag="false"
        :subfield="false"
        :boxShadow="false"
        :shortCut="false"
        :autofocus="false"
        previewBackground="#fff"
      />
    </article>
    <el-alert type="success" :closable="false" class="article-detail-copyright">
      <template #title>
        <p>本文作者：作者昵称</p>
        <p>原文链接：https://www.baidu.com</p>
        <strong>
          版权归作者所有，采用
          <a
            href="http://creativecommons.org/licenses/by/3.0/cn"
            class="protocol"
          >
            CC BY 3.0 CN协议
          </a>
          进行许可。转载请注明作者、来源、译者等出处信息!
        </strong>
      </template>
    </el-alert>
    <div class="article-tag-share">
      <ul class="article-tag-list">
        <li v-for="tag of article.main.tags" :key="tag.id">
          <router-link
            :to="{
              name: 'PublicPage',
              params: { menuName: 'tags', label: tag.name },
            }"
          >
            {{ tag.name }}
          </router-link>
        </li>
      </ul>
      <ul class="article-share-list">
        <li>
          <router-link to="#" class="iconfont-qq">
            <i class="el-icon-third-qq iconfont-qq" />
          </router-link>
        </li>
        <li>
          <router-link to="#" class="iconfont-wechat">
            <i class="el-icon-third-wechat iconfont-wechat" />
          </router-link>
        </li>
        <li>
          <router-link to="#" class="iconfont-weibo">
            <i class="el-icon-third-weibo-circle iconfont-weibo" />
          </router-link>
        </li>
        <li>
          <router-link to="#" class="iconfont-zhihu">
            <i class="el-icon-third-zhihu iconfont-zhihu" />
          </router-link>
        </li>
      </ul>
    </div>
    <div class="article-reward">
      <el-button
        type="primary"
        class="reward-btn"
        @mouseenter.native="showQRCode"
        @mouseleave.native="hideQRCode"
      >
        <i class="el-icon-third-qr-code" />
        <span>打赏</span>
        <transition name="fade">
          <ul v-show="isVisiable" class="qrcode-list">
            <li class="qrcode-list-item">
              <a href="/article.png" target="_blank">
                <el-image src="/article.png" fit="cover" class="qrcode-img" />
                <p class="qrcode-title">微信</p>
              </a>
            </li>
            <li class="qrcode-list-item">
              <a href="/article.png" target="_blank">
                <el-image src="/article.png" fit="cover" class="qrcode-img" />
                <p class="qrcode-title">支付宝</p>
              </a>
            </li>
          </ul>
        </transition>
      </el-button>
    </div>
    <nav class="article-prev-next">
      <el-row>
        <el-col :span="12" :xs="24">
          <div class="article-prev">
            <router-link
              :to="{ path: 'articleDetail', query: { articleId: 1 } }"
              class="prev-link"
            >
              <el-image src="/article.png" fit="cover" class="prev-img" />
              <div class="prev-content">
                <p class="prev-text">上一篇</p>
                <p class="prev-title ellipsis1">
                  在浏览器输入URL回车之后发生了什么（超详细版）
                </p>
              </div>
            </router-link>
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="article-next">
            <router-link
              :to="{ path: 'articleDetail', query: { articleId: 1 } }"
              class="next-link"
            >
              <el-image src="/article.png" fit="cover" class="next-img" />
              <div class="next-content">
                <p class="next-text">下一篇</p>
                <p class="next-title ellipsis1">设置Windows电脑自动关机</p>
              </div>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </nav>
    <div class="recommend">
      <p class="recommend-text">
        <i class="el-icon-third-xiangguan" />
        <span>相关推荐</span>
      </p>
      <el-row v-for="i of 2" :key="i" :gutter="6" class="recommend-row">
        <el-col v-for="i of 3" :key="i" :span="8">
          <div class="recommend-item">
            <router-link
              :to="{ path: 'articleDetail', query: { articleId: 1 } }"
              class="recommend-link"
            >
              <el-image src="/article.png" fit="cover" class="recommend-img" />
              <div class="recommend-content">
                <p class="recommend-date">
                  <i class="el-icon-third-date" />
                  <time>2020-12-23</time>
                </p>
                <p class="recommend-title ellipsis2">
                  在浏览器输入URL回车之后发生了什么（超详细版）
                </p>
              </div>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <DividerHr />
    <div class="comment">
      <p class="comment-text">
        <i class="el-icon-third-pinglun is-vertical" />
        <span>评论</span>
      </p>
      <Markdown />
      <div class="comment-footer">
        <p class="no-comment" v-if="article.comment.length <= 0">快来评论吧~</p>
        <div v-else>
          <p class="comment-total">
            <span>{{ article.comment.length }}</span>
            条评论
          </p>
          <ul class="comment-list">
            <li v-for="item of article.comment" :key="item.messageId">
              <CommentItem :message="item" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import $api from "$api/article";
import { mavonEditor } from "mavon-editor";
import DividerHr from "$components/DividerHr";
import Markdown from "$components/editor/Markdown";
import CommentItem from "$components/CommentItem";
export default {
  name: "ArticleDetailMain",
  components: {
    mavonEditor,
    DividerHr,
    Markdown,
    CommentItem,
  },
  data() {
    return {
      article: {
        header: {},
        main: {},
        other: {},
        comment: {},
      },
      isVisiable: false,
    };
  },
  mounted() {
    this.getArticleDetail();
  },
  methods: {
    showQRCode() {
      this.isVisiable = true;
    },
    hideQRCode() {
      this.isVisiable = false;
    },
    getArticleDetail() {
      $api.getArticleDetailById().then((res) => {
        if (res.status === 200) {
          this.article = res.data;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.article-detail-copyright >>> .el-alert__title {
  font-size: 0.16rem;
  line-height: 2;
}

.article-tag-share, .article-tag-list, .article-share-list {
  display: flex;
  align-items: center;
}

.protocol {
  color: var(--colorLevel1);

  &:hover {
    text-decoration: underline;
  }
}

.article-tag-share {
  justify-content: space-between;
  margin-top: 0.2rem;
}

.article-tag-list {
  justify-content: left;
}

.article-share-list {
  justify-content: right;
}

.article-tag-list a {
  color: #49b1f5;
  font-size: 0.85em;
  display: inline-block;
  border-radius: 0.12rem;
  border: 0.01rem solid #49b1f5;
  padding: 0 0.12rem;
  margin: 0.08rem 0.08rem 0.08rem 0;
  transition: all 0.3s;
}

.article-tag-list a:hover {
  color: white;
  background-color: #49b1f5;
}

.article-share-list i[class*='el-icon-third-'] {
  font-size: 0.15rem;
  transition: all 0.3s;
}

.article-share-list a {
  width: 0.3rem;
  height: 0.3rem;
  border: 0.01rem solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.04rem;
  transition: all 0.3s;
}

a.iconfont-qq:hover, a.iconfont-zhihu:hover {
  background-color: var(--iconfontQQ, #409EFF);

  i[class*='el-icon-third-'] {
    color: white;
  }
}

a.iconfont-wechat:hover {
  background-color: var(--iconfontWechat, #28c445);

  i[class*='el-icon-third-'] {
    color: white;
  }
}

a.iconfont-weibo:hover {
  background-color: var(--iconfontWeibo, #d32024);

  i[class*='el-icon-third-'] {
    color: white;
  }
}

.article-reward {
  width: 100%;
  text-align: center;
  font-size: 0.15rem;
  margin-top: 0.8rem;
  position: relative;
}

.reward-btn i[class*='el-icon-third-'] {
  color: white;
  font-size: 0.15rem;
}

.reward-btn >>> >span {
  display: flex;
  align-items: center;
}

.qrcode-list {
  padding: 0.1rem 0.05rem;
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.1rem;
  background-color: var(--colorLevel2, #8cc5ff);
  z-index: 100;
}

.qrcode-list:after {
  content: '';
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 0.13rem solid var(--colorLevel2, #8cc5ff);
  border-right: 0.13rem solid transparent;
  border-left: 0.13rem solid transparent;
  position: absolute;
  right: 0;
  bottom: -0.13rem;
  left: 0;
}

.qrcode-list-item {
  padding: 0 0.05rem;
}

.qrcode-img {
  width: 1.3rem;
  height: 1.3rem;
}

.qrcode-title {
  color: white;
  padding-top: 0.1rem;
}

.arrow-down {
  position: absolute;
  bottom: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.6s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.article-prev-next {
  height: 1.5rem;
  margin: 0.4rem 0 !important;
  background: #000;
}

.article-prev:hover .prev-img, .article-next:hover .next-img, .recommend-item:hover .recommend-img {
  opacity: 0.8;
  transform: scale(1.1);
}

.prev-link, .next-link, .recommend-link {
  width: 100%;
  height: 1.5rem;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.prev-img, .next-img, .recommend-img {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  transition: all 0.6s;
}

.prev-content, .next-content, .recommend-content {
  color: white;
  width: 100%;
  line-height: 0.35rem;
  font-size: 0.14rem;
  text-align: center;
  padding: 0.2rem 0.4rem;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.recommend-text, .comment-text {
  display: flex;
  padding-bottom: 0.1rem;
}

.recommend-text span, .comment-text span {
  color: var(--fontLevel1);
  font-size: 0.2rem;
  font-weight: bold;
}

.recommend-text i[class*='el-icon-third-'], .comment-text i[class*='el-icon-third-'] {
  color: var(--fontLevel1);
  font-size: 0.3rem;
  margin-right: 0.05rem;
}

.recommend-item {
  height: 2rem;
  overflow: hidden;
  background: #000;
}

.recommend-row {
  margin: 0.06rem 0;
}

.recommend-link {
  height: 2rem;
}

.recommend-content {
  line-height: 0.3rem;
}

.recommend-date i[class*='el-icon-third-'] {
  font-size: 0.14rem;
  margin-right: 0.05rem;
}

.comment-text {
  display: block;
}

.no-comment {
  color: #555;
  text-align: center;
  padding: 0.2rem 0;
}

.comment-total {
  font-size: 0.25rem;
  font-weight: bold;
  padding: 0.2rem 0;
}

.list-item-reply {
  margin-top: 0.2rem;
  margin-left: 0.65rem;
}
</style>